<template>
    <div class="announce">
        <assets-head :title="$t('公告')" />
        <div class="content">
            <div class="mb-50 tabBackground py-44 px-32 rounded-lg"  v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
                <div class="textColor font-32">{{item.title}}</div>
                <div class="mt-62 flex justify-between text-grey font-28">
                    <div v-if="item.startTimeStr!==null || item.startTimeStr!== ''">{{ item.startTimeStr }}</div>
                    <!--                  如果开始时间为null 不显示时间 下面的div占位用的-->
                    <div v-else></div>
                    <div class="flex items-center">
                        <span class="mr-24">{{$t('详情')}}</span>
                        <img src="@/assets/image/userCenter/more.png" alt=""  class="w-26 h-26"  />
                    </div>
                </div>
            </div>  
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from '@/API/userCenter'
import { dataTimeEx } from '@/utils/utis'
    export default {
        props: {

        },
        components: {
            assetsHead
        },
        data(){
            return {
                dataTimeEx,
                list:[]
            }
        },
        mounted(){
            this.getNewsList();
        },
        methods: {
            getNewsList(){
                Axios._getNewsList1({
                    language: this.$i18n.locale,
                }).then(res=>{
                    this.list = res.data
                    this.list = this.list.sort((a,b)=>b.startTime-a.startTime);
                })
            },
            toDetail(id){
                this.$router.push({ name:'AnnounceDetail',query:{id}})
            }
        }
    }
</script>

<style lang="scss" scoped>


.announce{
    width: 100%;
    box-sizing: border-box;
}
.content{
    padding: 40px 32px;
}
.title{
    text-decoration: underline;
}
</style>